<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../../script/TouchSlide.1.1.js"></script>
    
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <link rel="stylesheet" type="text/css" href="../../css/api.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <style>
        html {
            height: 100%;
            width: 100%;
            display: table;
            font-size: 60%;
        }

        body {
            display: table-cell;
            width: 100%;
            height: 100%;
            font-size: 40%;
           
        }
        .all{
            height: 100%;
            width: 100%;
        }
        .top{
            position: relative;
            background-color: #f7911b;
            height: 7.68%;
            width: 100%;
            text-align: center;
        }
        .back{
            font-size: 3rem;
            color: white;
            left: 1rem;
            line-height: 4rem;
            position: absolute;
        }
        .sub_upd{
            font-size: 1.6rem;
            color: white;
            line-height: 4.5rem;
            position: absolute;
            float: right;
            right: 1rem;
        }
        .title{
            font-size: 2rem;
            color: white;
            line-height: 4rem;
        }
        .main{
            position: absolute;
            height: 92.32%;
            width: 100%;
            background-color: #f6f6f6;
            overflow: auto;
        }
        .content{
            height: 99%;
            width: 100%;
            position: absolute;
            bottom: 0;
            background-color: #f6f6f6;
        }
        .top_slide{
            width: 100%;
            height: 4rem;
            background-color: white;
        }
        .slide_item{
            width: 33%;
            height: 4rem;
            float: left;
        }
        .slide_item a{
            color: #666666;
            font-size: 1.7rem;
            display: block;
            margin: auto;
            height: 100%;
            text-align: center;
            line-height: 4rem;
        }
        .on a{
            color: #f7911b;
        }
        .underline_box{
            height: 0.5rem;
            width: 100%;
            background-color: white;
        }
        .underline{
            width: 5.5rem;
            height: 0.4rem;
            border-radius: 0.2rem;
            background-color: #f7911b;
            margin-left: 9.5%;
        }
        .tips{
            width: 100%;
            height: 4.5rem;
            background-color: #ffb968;
        }
        .tips_text{
            width: 100%;
            height: 4rem;
            text-align: center;
            line-height: 4.5rem;
            font-size: 1.3rem;
            display: block;
        }
        .href{
            color: red;
        }
        .no_order{
            width: 100%;
            height: 18rem;
        }
        .no_order span{
            display: block;
            text-align: center;
            line-height: 18rem;
            font-size: 1.2rem;
            color: #999999;
        }
        .has_order_ul li{
            width: 100%;
            height: 12rem;
            margin-top: 0.5rem;
            background-color: white;
        }
        .has_order_ul span{
            position: relative;
        }
        .item_top{
            width: 100%;
            height: 4.5rem;
        }
        .item_mid{
            width: 100%;
            height: 7.5rem;
        }
        .from_mall{
            height: 2.2rem;
            width: 2.2rem;
            border: 0.1rem solid #CCC;
            font-size: 1.2rem;
            border-radius: 0.5rem;
            color: #f7911b;
            text-align: center;
            top: 0.8rem;
            left: 1rem;
            line-height: 2rem;
            display: block;
            float: left;
        }
        .order_code{
            font-size: 1.2rem;
            float: left;
            top: 1rem;
            left: 1rem;
            color: #999999;
        }
        .daifanli{
            float: right;
            color: #999999;
            font-size: 1.5rem;
            right: 1.7rem;
            top: 0.8rem;
        }
        .yifanli{
            float: right;
            color:rgb(0, 199, 0);
            font-size: 1.5rem;
            right: 1.7rem;
            top: 0.8rem;
        }
        .goods_img{
            position: relative;
            float: left;
            width: 7rem;
            height: 7rem;
            background-color:  #e5e5e5;
            left: 1rem;
            top:-0.5rem;
            border-radius: 0.5rem;
            opacity: 0.8;
           
        }

        .goods_img span{
            font-size: 4rem;
            position: relative;
            left: 1.5rem;
            top:0.5rem;
            color: #f7911b;;
        }


        .goods_title{
            float: left;
            font-size: 1.6rem;
            left: 3rem;
            width: 14rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis
        }
        .goods_type{
            float: left;
            font-size: 1.4rem;
            top:3rem;
            left: -11rem;
        }
        .goods_price{
            float: right;
            right: 2rem;
            font-size: 2rem;

        }
        .goods_fan{
            float: right;
            right: -6.2rem;
            font-size: 1.5rem;
            top: 2.5rem;
            color:#f7911b;
            margin-top: -0.3rem;
        }
    </style>
</head>
<body>
      
<div class="all">
    
    <div class="top">
        <span class="aui-iconfont aui-icon-left" style="font-size: 2rem;line-height: 4rem;float: left;" onclick="api.closeWin()"></span>
        <span class="title">我的订单</span>
        <!-- <span class="sub_upd">搜索</span> -->
    </div>
    <div class="main">
        <div class="content">
            
            <div id="leftTabBox" class="tabBox">
                    <div class="hd top_slide">
                        <ul>
                            <li class="slide_item"><a>全部</a></li>
                            <li class="slide_item"><a>待返现</a></li>
                            <li class="slide_item"><a>已返现</a></li>
                        </ul>
                    </div>
                    <div class="underline_box">
                        <div class="underline"></div>
                    </div>
                    <div class="bd">
            <ul class="has_order_ul" id="one">
                                    
                                </ul>
     <ul class="has_order_ul" id="two">
                                 <!-- <li  >
                                    <div class="tips">
                                        <span class="tips_text">找不到订单?去<span class="href">【绑定订单】</span>,方便自动返利。</span>
                                    </div>
                                    <div class="no_order">
                                        <span>还没有订单,快去买东西吧</span>
                                    </div>
                                </li> -->
                            
                                
                            </ul>
                           
      <ul class="has_order_ul" id="three">
                                   
                                </ul>
                    </div>
                </div>
                <script type="text/javascript"></script>
            <!-- <div class="hide_box">
                <div class="real_box">
                    <div class="hide_item">
                        
                    </div>
                    <div class="hide_item">
                        <div class="tips">
                            <span class="tips_text">找不到订单?去<span class="href">【绑定订单】</span>,方便自动返利。</span>
                        </div>
                        <div class="no_order">
                            <span>还没有订单,快去买东西吧</span>
                        </div>
                    </div>
                </div>
                
            </div> -->
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    apiready = function(){
          
        $(function(){
            var e=$api.getStorage('my_order');
        TouchSlide({ slideCell:"#leftTabBox",delayTime:260,defaultIndex:e,startFun:function(i,c){
           
            if(i==0)
            {
                $('.underline').animate({marginLeft:'9.6%'},240);
            }else if(i==1){
                $('.underline').animate({marginLeft:'42.5%'},240);
            }else if(i==2){
                $('.underline').animate({marginLeft:'75.5%'},240);
            }
        }});
    })

  
           
    var token = $api.getStorage('token');
 	var token = {
                token: token
            };
           
        api.ajax({
            url: 'http://www.mk517.com/webApi/myOrder.php',
            method: 'post',
            "headers": {
                "Content-Type": "application/json"
            },
            dataType: "json",
            data: {
                body: token
            }
        }, function(ret, err) {
            // alert(JSON.stringify(ret));
            if (ret) {
               
               
                    for(var i=0; i<=ret.length;i++){
                            if(ret[i].sta==1){
                                $api.byId('two').innerHTML+=' <li>'+
                                      '  <div class="item_top">'+
                                           ' <span class="order_code">订单号:'+ret[i].order_number+'</span>'+
                                           ' <span class="daifanli">待返利</span>'+
                                       ' </div>'+
                                        '<div class="item_mid">'+
                                            '<div class="goods_img"><span>'+ret[i].mall+'</span></div>'+
                                            '<span class="goods_title">'+ret[i].order_name+'</span>'+
                                           ' <span class="goods_type">数量:'+ret[i].num+'</span>'+
                                            '<span class="goods_price">￥'+ret[i].order_money+'</span>'+
                                            '<span class="goods_fan">返现'+ret[i].order_rebate+'元</span>'+
                                       ' </div>'+
                                   ' </li>'
                                   
                                }else if(ret[i].sta==0){

                                    $api.byId('three').innerHTML+=' <li>'+
                                      '  <div class="item_top">'+
                                          
                                           ' <span class="order_code">订单号:'+ret[i].order_number+'</span>'+
                                           ' <span class="yifanli">已返利</span>'+
                                       ' </div>'+
                                        '<div class="item_mid">'+
                                            '<div class="goods_img"><span>'+ret[i].mall+'</span></div>'+
                                            '<span class="goods_title">'+ret[i].order_name+'</span>'+
                                           ' <span class="goods_type">数量:'+ret[i].num+'</span>'+
                                            '<span class="goods_price">￥'+ret[i].order_money+'</span>'+
                                            '<span class="goods_fan">返现'+ret[i].order_rebate+'元</span>'+
                                       ' </div>'+
    
                                   ' </li>'

                                }
                                $api.byId('one').innerHTML= $api.byId('three').innerHTML+$api.byId('two').innerHTML;
                                
                     };
                    
                                    //         if(num1==0){
                                    //  $api.byId('two').innerHTML=
                                    //                             '<li  >'+
                                    //                             '<div class="tips">'+
                                    //                             ' <span class="tips_text">找不到订单?去<span class="href">【绑定订单】</span>,方便自动返利。</span>'+
                                    //                             '</div>'+
                                    //                             '<div class="no_order">'+
                                    //                             '<span>还没有订单,快去买东西吧</span>'+
                                    //                             ' </div>'+
                                    //                             ' </li>'
                                    //     }else if(num2==0){
                                    // $api.byId('three').innerHTML=
                                    //                             '<li  >'+
                                    //                             '<div class="tips">'+
                                    //                             ' <span class="tips_text">找不到订单?去<span class="href">【绑定订单】</span>,方便自动返利。</span>'+
                                    //                             '</div>'+
                                    //                             '<div class="no_order">'+
                                    //                             '<span>还没有订单,快去买东西吧</span>'+
                                    //                             ' </div>'+
                                    //                             ' </li>'
                                    //     }else if(num2==0&&num1==0){
                                    //         $api.byId('one').innerHTML='<li  >'+
                                    //                             '<div class="tips">'+
                                    //                             ' <span class="tips_text">找不到订单?去<span class="href">【绑定订单】</span>,方便自动返利。</span>'+
                                    //                             '</div>'+
                                    //                             '<div class="no_order">'+
                                    //                             '<span>还没有订单,快去买东西吧</span>'+
                                    //                             ' </div>'+
                                    //                             ' </li>'
                                    //         }
           
                }else {
                alert(JSON.stringify(err));
            }
        });



        
    }
    </script>
  
</html>